<template>
  <view class="container">
    <div
      v-for="( item,index ) in couponList"
      :key="index"
      class="coupon-box"
    >
      <div class="coupon-item">
        <span class="coupon-name">{{ item.name }}</span>
        <span class="coupon-content">{{ item.content }}</span>
        <span class="coupon-remain">仅剩<a style="color:red;">{{ item.remain }}</a>张！</span>
        <el-button size="small" @click="handleGetCoupon" class="getCoupon-button">领取</el-button>
      </div>
    </div>
  </view>
</template>
<script setup>
const couponList = ref([])
onMounted(() => {
  load()
})
const load = () => {
  // 向后端请求数据...
  couponList.value = [
    {
      id: 1,
      name: '无门槛优惠券',
      content: '可抵10元！',
      remain: 10
    },
    {
      id: 2,
      name: '超级神券',
      content: '满10000减5元！',
      remain: 99999
    }
  ]
}
const handleGetCoupon = () => {
  ElMessage.success('领取成功！')
  // 向后端发请求
}
</script>
<style scoped lang="scss">
@use './couponCenter.scss'
</style>
